<template>
	<view class="page">
		<u-loading-page :loading="loadingShow" bgColor="#ffffff94;" loadingColor="#a4b0be;" color="#a4b0be;"
			loadingText="订单加载中...." fontSize="30rpx"></u-loading-page>
		<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
			@clickItem="onClickItem" @searchValue="search"></tabControl>
		<!-- 使用 swiper 配合 滑动切换 -->
		<swiper class="swiper" style="height: 100%;margin-top: -90rpx;" @change='scollSwiper' :current='current'>
			<swiper-item v-for="(item,index) in items" :key='index'>
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="loadMoreData">
					<view class="contener">
						<view class="contener700">
							<view class="orderListbox" v-for="(item,index1) in orderList" :key="item.id">
								<view class="refundTag" v-if="$comm.checkNull(item.afterSalesStatus)">
									<view class="refund">
										退款中
									</view>
									<view class="triangle"></view>
								</view>
								<view class="between">
									<text style="font-size: 30rpx;">订单号:{{$comm.checkNull(item.parentOrder)?item.parentOrder:item.son[0].orderNum}}</text>
									<text class="iconfont icon-fuzhicopy25" @click="copy($comm.checkNull(item.parentOrder)?item.parentOrder:item.son[0].orderNum)"
										style="color: #a5a5a5;"></text>
									<view style="margin-left: auto;">
										<rich-text :nodes="getStatus($comm.checkNull(item.status)?item.status:item.son[0].status)"></rich-text>
									</view>
								</view>
							</view>
							<uni-load-more :status="status" :icon="1"  size="14" :content-text="contentText" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				loadingShow: true,
				/*
				0待付款  1已付款  3已评价  -1已取消
				 */
				orderList: [],
				items: ['全部', '待付款', '已付款', '已核验', '待评价', '已完成', '已取消'],
				current: 0,
				ifBottomRefresh: false,
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 5,
					type: 1,
					status: ""
				},
				imgapi: "",
				status: 'more',
				timer: null
			};
		},
		onLoad(e) {
			if (this.params.pageNo == 1) {
				this.loadingShow = true
			}
			this.getList()
		},
		onShow() {

		},

		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				console.log("触底")
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.getList()
			} else {
				console.log('123')
				this.status = "noMore"
			}
		},
		methods: {
			goDetail(sna) {
				let id = JSON.parse(sna)[0].id
				uni.redirectTo({
					url: "/pageA/growVegetables/vegetablesDetails?id=" + id
				})
			},
			copy(text) {
				uni.setClipboardData({
					data: text, //要复制的内容
					success: res => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'none'
						})
					}
				})
			},

			evaluation(item) {
				let id = JSON.parse(item.snapshot)
				uni.navigateTo({					
					url: `/pageA/mine/eval?itemId=${id[0].id}&type=1&merchantId=${item.merchantId}&orderNum=${item.orderNum}`
				});
			},
			// 底部刷新
			loadMoreData() {
				// 防止多次触发,节流
				if (!this.timer) {
					this.timer = setTimeout(() => {
						if (this.status != 'noMore') {
							console.log("触底")
							this.status = 'loading';
							this.ifBottomRefresh = true
							//正式服去掉这个延时器
							this.getList()
						} else {
							console.log('123')
							this.status = "noMore"
						}
						this.timer = null
					}, 500)
				}
			},
			tzorderDetails(item) {
				console.log('1', item)
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: `./orderDetails?item=${items}`
				})
			},
			cancelOrder(orderNum) {
				let _this = this
				uni.showModal({
					title: '取消订单',
					content: '确定取消该采摘订单吗',
					success: function(res) {
						if (res.confirm) {
							_this.$axios({
								url: "user/info/cancelOrder",
								method: "post",
								data: {
									orderNum: orderNum,
								}
							}).then((res) => {
								uni.showToast({
									title: res.result,
									icon: 'none',
									duration: 2000
								})
								let status = _this.params.status
								_this.cleanList()
								_this.params.status = status
								_this.getList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			cleanList() {
				this.orderList = [];
				this.params = {
					pageNo: 1,
					pageSize: 5,
					type: 1
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			getStatus(status) {
				/* 
				0待付款
				1已付款
				2商家已扫码核验
				3已评价
				-1已取消 
				 */
				switch (status) {
					case 0:
						return "<font style='color: #4e4e4e'>待付款</font>"
					case 1:
						return "<font style='color: #139e4c'>已付款</font>"
					case 2:
						return "<font style='color: #d48c11'>商家已扫码核验</font>"
					case 3:
						return "<font style='color: #a29bfe'>待评价</font>"
					case 4:
						return "<font style='color: #2b88d8'>已完成</font>"
					case -1:
						return "<font style='color: red'>已取消</font>"
					case -2:
						return "<font style='color: #f0932b'>已退款</font>"
				}
			},

			getList() {

				this.imgapi = this.$reqConfig.URLIMAGE
				this.$axios({
					url: "user/info/orderList",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						type: this.params.type,
						status: this.params.status
					}
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据						
					if (res.result.pages >= this.params.pageNo) {
						if (this.ifBottomRefresh) {
							this.orderList = this.orderList.concat(res.result.list)
						} else {
							this.orderList = res.result.list
						}
					} else {
						this.status = 'noMore'
					}
					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					this.params.pageNo++;
					this.loadingShow = false
				})
			},
			onClickItem(val) {
				this.current = val.currentIndex
				console.log(val)
			},
			//搜索框的值
			search(e) {
				console.log('eee', e)
			},
			scollSwiper(e) {
				console.log(e);
				this.cleanList()
				switch (e.detail.current) {
					case 0:
						this.params.status = ""
						break;
					case 1:
						this.params.status = "0"
						break;
					case 2:
						this.params.status = "1"
						break;
					case 3:
						this.params.status = "2"
						break;
					case 4:
						this.params.status = "3"
						break;
					case 5:
						this.params.status = "4"
						break;
					case 6:
						this.params.status = "-1"
						break;

				}
				this.current = e.target.current
				this.getList()
			}
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	/deep/ .tabControl {
		height: 10vh;
		background-color: #aaff00;
	}

	/deep/ .swiper {
		height: 90vh;
	}

	.page {
		padding-top: 200rpx;
		height: 100%;
	}

	.orderListbox {
		margin-top: 10rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		padding: 20rpx;
		overflow: hidden;

		.refundTag {
			position: absolute;
			top: -80rpx;
			left: -8rpx;
		}

		.refund {
			position: absolute;
			font-size: 21rpx;
			bottom: 67rpx;
			left: 19rpx;
			color: white;
			transform: rotate(313deg);
		}

		.triangle {
			width: 0;
			height: 0;
			border-top: 100px solid #f39c12;
			border-right: 100px solid transparent;
		}
	}

	.between {
		padding-bottom: 15rpx;
		border-bottom: 0.5rpx solid #C4C4C4;


	}

	.between2 {
		display: flex;
		/* justify-content: space-between; */
		width: 520rpx;
		font-size: 28rpx;
	}

	.orderListboximg {
		margin-top: 10rpx;
		border-radius: 20rpx;
		width: 130rpx;
		height: 130rpx;
	}

	.orderListxinxi {
		margin-top: 10rpx;
		height: 130rpx;
		display: flex;
	}

	.orderListprice {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.paybtn {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		transform: scale(0.9);
		background-color: #fff;
	}

	.balckborder {
		border: 1rpx solid #747474;
		color: #747474;
	}

	.redborder {
		border: 1rpx solid #e20f0f;
		color: #e20f0f;
	}

	.greenborder {
		border: 1rpx solid#1abc9c;
		color: #1abc9c;
	}

	.blueborder {
		border: 1rpx solid #3282c8;
		color: #3282c8;
	}

	.paybtnBox {
		display: flex;
	}
	
	.snapshot {
		width: 40%;
		color: #999;
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 25rpx;
	}
</style>
